<template>
  <div id="StatisticalTableShow_container">
    <!-- 导航栏 -->
    <van-nav-bar title="统计表">
    </van-nav-bar>

    <!-- 球队展示 -->
    <div class="team_container">
      <van-row class="team_containe_box">
        <van-col span="10" class="team_container_left">
          <span>{{this.CreateLeague[this.logoindex].CompetitionInfo[this.creatDataId].text1}}</span>

        </van-col>
        <van-col span="4" class="team_container_center">
          <span>{{this.endData_obj.First_team.total}} : {{this.endData_obj.Second_team.total}}</span>

        </van-col>
        <van-col span="10" class="team_container_right">
          <span>{{this.CreateLeague[this.logoindex].CompetitionInfo[this.creatDataId].text2}}</span>

        </van-col>
      </van-row>
    </div>

    <!-- 球队信息展示 -->

    <van-tabs v-model="active" class="teaminfo_container">
      <van-tab title="简介">
        <p class="tips">比赛信息</p>
        <van-cell :title="this.CreateLeague[this.logoindex].CompetitionInfo[this.creatDataId].time" icon="underway-o"/>

        <van-cell :title="this.CreateLeague[this.logoindex].CompetitionInfo[this.creatDataId].xxdress" icon="location-o"/>

        <van-cell :title="this.CreateLeague[this.logoindex].CompetitionInfo[this.creatDataId].state" icon="newspaper-o"/>

        <!-- 联赛信息 -->
        <p class="tips">联赛信息</p>
        <van-cell :title="this.CreateLeague[this.logoindex].data[0].id">
          <!-- 使用 title 插槽来自定义标题 -->
          <template #icon>
            <van-image
              round
              width="1.5rem"
              height="1.5rem"
              :src="logo"
            />
          </template>
        </van-cell>

        <!-- 交战历史 -->
        <p class="tips">交战历史</p>
        <van-cell id="History">
          <div class="WarHistory-left">
            <div class="WarHistory-left_top">
              <div class="WarHistory-left_top_left">
                <van-image
                  round
                  width="1.5rem"
                  height="1.5rem"
                  :src="require('@/images/serve//userlogo/my1.png') "
                />
                <span>{{this.CreateLeague[this.logoindex].CompetitionInfo[this.creatDataId].text1}}</span>
              </div>
              <div class="WarHistory-left_top_right">43</div>
            </div>
            <div class="WarHistory-left_btm">
              <div class="WarHistory-left_btm_left">
                <van-image
                  round
                  width="1.5rem"
                  height="1.5rem"
                  :src="require('@/images/serve//userlogo/mylogo3.png') "
                />
                <span>{{this.CreateLeague[this.logoindex].CompetitionInfo[this.creatDataId].text2}}</span>
              </div>
              <div class="WarHistory-left_btm_right">50</div>
            </div>

          </div>

          <div class="WarHistory-right">
            <span>2021-04-10 16:40</span>
          </div>
        </van-cell>

      </van-tab>
      <van-tab title="赛况">
        <van-steps  direction="vertical"  :active="0">
          <van-step>
            <h3>【{{ this.endData_obj.BallRight }}】比赛开始 {{ this.endData_obj.BallRight }}球权</h3>
            <p>10:00</p>
          </van-step>
          <van-step>
            <!-- 一队首发 -->
            <h3>【{{this.CreateLeague[this.logoindex].CompetitionInfo[this.creatDataId].text1}}】首发队员</h3>
            <p v-for="(i,index1) in this.endData_obj.First_team.Starter" :key="index1">{{ i.msg.name }} {{ i.msg.Number }}</p>
            <!-- 二队首发 -->
            <h3>【{{this.CreateLeague[this.logoindex].CompetitionInfo[this.creatDataId].text2}}】首发队员</h3>
            <p v-for="(i,index2) in this.endData_obj.Second_team.Starter" :key="'new'+index2">{{ i.msg.name }} {{ i.msg.Number }}</p>
            <p>10:00</p>
          </van-step>
          <van-step v-for="(item,index) in this.allList" :key="index">
            <h3>【{{item.team}}】 {{ item.name }}—{{item.number}}号 {{item.type}}</h3>
            <p>{{item.time}}</p>
          </van-step>
          <van-step>
            <h3>比赛结束</h3>
            <!-- <p>{{ this.endData_obj.begaintime }}</p> -->
          </van-step>
        </van-steps>
      </van-tab>
      <van-tab title="数据">

        <!-- 本场最佳 -->
        <p class="tips">本场最佳</p>
        <!-- 得分 -->
        <van-cell>
          <van-row id="df-box">
            <van-col span="9" class="df1">杨天宇</van-col>
            <van-col span="2">16</van-col>
            <van-col span="2">得分</van-col>
            <van-col span="2">8</van-col>
            <van-col span="9" class="df2">斯卫东</van-col>
          </van-row>
        </van-cell>
        <!-- 篮板 -->
        <van-cell>
          <van-row id="df-box">
            <van-col span="9" class="df1">杨天宇</van-col>
            <van-col span="2">10</van-col>
            <van-col span="2">篮板</van-col>
            <van-col span="2">10</van-col>
            <van-col span="9" class="df2">斯卫东</van-col>
          </van-row>
        </van-cell>

        <!-- 助攻 -->
        <van-cell>
          <van-row id="df-box">
            <van-col span="9" class="df1">杨天宇</van-col>
            <van-col span="2">4</van-col>
            <van-col span="2">助攻</van-col>
            <van-col span="2">6</van-col>
            <van-col span="9" class="df2">斯卫东</van-col>
          </van-row>
        </van-cell>

        <!-- 球队对比 -->
        <p class="tips">球队对比</p>
        <!-- 二分 -->
        <van-row class="contrast">
          <p class="contrast——tips">二分%</p>
          <van-col span="3">25.8</van-col>
          <van-col span="9">
            <van-progress  color="#f2826a" :percentage="25" />
          </van-col>
          <van-col span="9">
            <van-progress  color="#f2826a" :percentage="40" />
          </van-col>
          <van-col span="3">33.3</van-col>
        </van-row>
        <!-- 三分 -->
        <van-row class="contrast">
          <p class="contrast——tips">三分%</p>
          <van-col span="3">25.8</van-col>
          <van-col span="9">
            <van-progress  color="#f2826a" :percentage="21" />
          </van-col>
          <van-col span="9">
            <van-progress  color="#f2826a" :percentage="26" />
          </van-col>
          <van-col span="3">33.3</van-col>
        </van-row>
        <!-- 罚球 -->
        <van-row class="contrast">
          <p class="contrast——tips">三分%</p>
          <van-col span="3">25.8</van-col>
          <van-col span="9">
            <van-progress  color="#f2826a" :percentage="21" />
          </van-col>
          <van-col span="9">
            <van-progress  color="#f2826a" :percentage="26" />
          </van-col>
          <van-col span="3">33.3</van-col>
        </van-row>
        <!-- 篮板 -->
        <van-row class="contrast">
          <p class="contrast——tips">三分%</p>
          <van-col span="3">25.8</van-col>
          <van-col span="9">
            <van-progress  color="#f2826a" :percentage="13" />
          </van-col>
          <van-col span="9">
            <van-progress  color="#f2826a" :percentage="9" />
          </van-col>
          <van-col span="3">33.3</van-col>
        </van-row>
        <!-- 盖帽 -->
        <van-row class="contrast">
          <p class="contrast——tips">三分%</p>
          <van-col span="3">25.8</van-col>
          <van-col span="9">
            <van-progress  color="#f2826a" :percentage="0" />
          </van-col>
          <van-col span="9">
            <van-progress  color="#f2826a" :percentage="1" />
          </van-col>
          <van-col span="3">33.3</van-col>
        </van-row>
        <!-- 助攻 -->
        <van-row class="contrast">
          <p class="contrast——tips">三分%</p>
          <van-col span="3">25.8</van-col>
          <van-col span="9">
            <van-progress  color="#f2826a" :percentage="12" />
          </van-col>
          <van-col span="9">
            <van-progress  color="#f2826a" :percentage="12" />
          </van-col>
          <van-col span="3">33.3</van-col>
        </van-row>
        <!-- 抢断 -->
        <van-row class="contrast">
          <p class="contrast——tips">三分%</p>
          <van-col span="3">25.8</van-col>
          <van-col span="9">
            <van-progress  color="#f2826a" :percentage="13" />
          </van-col>
          <van-col span="9">
            <van-progress  color="#f2826a" :percentage="4" />
          </van-col>
          <van-col span="3">33.3</van-col>
        </van-row>
        <!-- 失误 -->
        <van-row class="contrast">
          <p class="contrast——tips">三分%</p>
          <van-col span="3">25.8</van-col>
          <van-col span="9">
            <van-progress  color="#f2826a" :percentage="17" />
          </van-col>
          <van-col span="9">
            <van-progress  color="#f2826a" :percentage="20" />
          </van-col>
          <van-col span="3">33.3</van-col>
        </van-row>
        <!-- 犯规 -->
        <van-row class="contrast">
          <p class="contrast——tips">三分%</p>
          <van-col span="3">25.8</van-col>
          <van-col span="9">
            <van-progress  color="#f2826a" :percentage="8" />
          </van-col>
          <van-col span="9">
            <van-progress  color="#f2826a" :percentage="16" />
          </van-col>
          <van-col span="3">33.3</van-col>
        </van-row>

        <!-- 每一节对比 -->
        <p class="tips">每一节对比</p>
        <van-row class="Section_comparison" id="Section_1">
          <van-col span="9"></van-col>
          <van-col span="3">1st</van-col>
          <van-col span="3">2nd</van-col>
          <van-col span="3">3rd</van-col>
          <van-col span="3">4th</van-col>
          <van-col span="3">总分</van-col>
        </van-row>
        <!-- 我奥一队 -->
        <van-row class="Section_comparison">
          <van-col span="9">我奥一队</van-col>
          <van-col span="3">12</van-col>
          <van-col span="3">4</van-col>
          <van-col span="3">9</van-col>
          <van-col span="3">10</van-col>
          <van-col span="3">35</van-col>
        </van-row>
        <!-- 我奥二队 -->
        <van-row class="Section_comparison">
          <van-col span="9">我奥二队</van-col>
          <van-col span="3">6</van-col>
          <van-col span="3">8</van-col>
          <van-col span="3">7</van-col>
          <van-col span="3">13</van-col>
          <van-col span="3">34</van-col>
        </van-row>

        <!-- 我奥一队 -->
        <p class="tips">我奥一队</p>
        <!-- 球员一 -->
        <van-row class="Section_comparison">
          <van-col span="9">球员1</van-col>
          <van-col span="3">6</van-col>
          <van-col span="3">8</van-col>
          <van-col span="3">7</van-col>
          <van-col span="3">13</van-col>
          <van-col span="3">34</van-col>
        </van-row>
        <!-- 球员二 -->
        <van-row class="Section_comparison">
          <van-col span="9">球员2</van-col>
          <van-col span="3">6</van-col>
          <van-col span="3">8</van-col>
          <van-col span="3">7</van-col>
          <van-col span="3">13</van-col>
          <van-col span="3">34</van-col>
        </van-row>
        <!-- 球员三 -->
        <van-row class="Section_comparison">
          <van-col span="9">球员2</van-col>
          <van-col span="3">6</van-col>
          <van-col span="3">8</van-col>
          <van-col span="3">7</van-col>
          <van-col span="3">13</van-col>
          <van-col span="3">34</van-col>
        </van-row>
        <!-- 球员四 -->
        <van-row class="Section_comparison">
          <van-col span="9">球员2</van-col>
          <van-col span="3">6</van-col>
          <van-col span="3">8</van-col>
          <van-col span="3">7</van-col>
          <van-col span="3">13</van-col>
          <van-col span="3">34</van-col>
        </van-row>
        <!-- 球员五 -->
        <van-row class="Section_comparison">
          <van-col span="9">球员2</van-col>
          <van-col span="3">6</van-col>
          <van-col span="3">8</van-col>
          <van-col span="3">7</van-col>
          <van-col span="3">13</van-col>
          <van-col span="3">34</van-col>
        </van-row>
        <!-- 球员六 -->
        <van-row class="Section_comparison">
          <van-col span="9">球员2</van-col>
          <van-col span="3">6</van-col>
          <van-col span="3">8</van-col>
          <van-col span="3">7</van-col>
          <van-col span="3">13</van-col>
          <van-col span="3">34</van-col>
        </van-row>
        <!-- 球员七 -->
        <van-row class="Section_comparison">
          <van-col span="9">球员2</van-col>
          <van-col span="3">6</van-col>
          <van-col span="3">8</van-col>
          <van-col span="3">7</van-col>
          <van-col span="3">13</van-col>
          <van-col span="3">34</van-col>
        </van-row>
        <!-- 球员八 -->
        <van-row class="Section_comparison">
          <van-col span="9">球员2</van-col>
          <van-col span="3">6</van-col>
          <van-col span="3">8</van-col>
          <van-col span="3">7</van-col>
          <van-col span="3">13</van-col>
          <van-col span="3">34</van-col>
        </van-row>

        <!-- 我奥二队 -->
        <p class="tips">我奥二队</p>

        <!-- 球员一 -->
        <van-row class="Section_comparison">
          <van-col span="9">球员1</van-col>
          <van-col span="3">6</van-col>
          <van-col span="3">8</van-col>
          <van-col span="3">7</van-col>
          <van-col span="3">13</van-col>
          <van-col span="3">34</van-col>
        </van-row>
        <!-- 球员二 -->
        <van-row class="Section_comparison">
          <van-col span="9">球员2</van-col>
          <van-col span="3">6</van-col>
          <van-col span="3">8</van-col>
          <van-col span="3">7</van-col>
          <van-col span="3">13</van-col>
          <van-col span="3">34</van-col>
        </van-row>
        <!-- 球员三 -->
        <van-row class="Section_comparison">
          <van-col span="9">球员2</van-col>
          <van-col span="3">6</van-col>
          <van-col span="3">8</van-col>
          <van-col span="3">7</van-col>
          <van-col span="3">13</van-col>
          <van-col span="3">34</van-col>
        </van-row>
        <!-- 球员四 -->
        <van-row class="Section_comparison">
          <van-col span="9">球员2</van-col>
          <van-col span="3">6</van-col>
          <van-col span="3">8</van-col>
          <van-col span="3">7</van-col>
          <van-col span="3">13</van-col>
          <van-col span="3">34</van-col>
        </van-row>
        <!-- 球员五 -->
        <van-row class="Section_comparison">
          <van-col span="9">球员2</van-col>
          <van-col span="3">6</van-col>
          <van-col span="3">8</van-col>
          <van-col span="3">7</van-col>
          <van-col span="3">13</van-col>
          <van-col span="3">34</van-col>
        </van-row>
        <!-- 球员六 -->
        <van-row class="Section_comparison">
          <van-col span="9">球员2</van-col>
          <van-col span="3">6</van-col>
          <van-col span="3">8</van-col>
          <van-col span="3">7</van-col>
          <van-col span="3">13</van-col>
          <van-col span="3">34</van-col>
        </van-row>
        <!-- 球员七 -->
        <van-row class="Section_comparison">
          <van-col span="9">球员2</van-col>
          <van-col span="3">6</van-col>
          <van-col span="3">8</van-col>
          <van-col span="3">7</van-col>
          <van-col span="3">13</van-col>
          <van-col span="3">34</van-col>
        </van-row>
        <!-- 球员八 -->
        <van-row class="Section_comparison">
          <van-col span="9">球员2</van-col>
          <van-col span="3">6</van-col>
          <van-col span="3">8</van-col>
          <van-col span="3">7</van-col>
          <van-col span="3">13</van-col>
          <van-col span="3">34</van-col>
        </van-row>
      </van-tab>
    </van-tabs>

  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'StatisticalTable',
  data() {
    return {
      active: 2,
      logo: ''
    }
  },
  computed: {
    ...mapState(['allList', 'CreateLeague', 'creatDataId', 'logoindex', 'endData_obj'])
  },
  mounted() {
    this.show()
  },
  methods: {
    show() {
      console.log(this.allList)
      console.log(this.endData_obj.First_team.Starter)
      if (this.CreateLeague[this.logoindex].data[0].logoflag) {
        this.logo = this.CreateLeague[this.logoindex].data[0].logo[0].url
      } else {
        this.logo = this.CreateLeague[this.logoindex].data[0].logo[0].content
      }
    }
  }
}
</script>

<style scoped>
.van-nav-bar{
  background-color: black;
}
.team_container{
  background-color: rgb(0, 0, 0);
  width: 100%;
  height: 40vw;
}
.team_containe_box{
  height: 100%;
  background-color: aqua;
  background-image: url(@/images/serve/basketball/bg.png);
  background-size: cover;
}
.team_container_left,.team_container_center,.team_container_right{
  /* border: 4px solid red; */
  line-height: 40vw;
  text-align: center;
  color: white;
}
.tips{
  height: 5vw;
  background-color: gainsboro;
  font-size: 2vw;
  color: gray;
  padding-left: 2vw;
  margin: 0;
  line-height: 5vw;
}
::v-deep .van-cell__title{
  margin-left: 3vw;
}
#History{
  text-align: center;
  /* border: 4px solid red; */
  padding: 3.2vw;
}
.WarHistory-left{
  border-right: 4px solid rgb(104, 104, 104);
  width: 70%;
  float: left;
}
.WarHistory-right{
  /* border-left: 4px solid rgb(39, 97, 223); */
  width: 26%;
  /* height: 100%; */
  float: right;
  padding-top: 1vw;
  /* line-height: 14vw; */
  text-align: center;
}
.WarHistory-left_top_left{
  position: relative;
  float: left;
  width: 80%;
  height: 7vw;

  /* border: 4px solid rgb(39, 97, 223); */
}
.WarHistory-left_top_left span{
  position: absolute;
  left: 15%;
  display: inline-block;
  /* line-height: 7vw; */
  /* border: 1px solid rgb(39, 97, 223); */

}
.WarHistory-left_top_right{
  float: right;
  width: 15%;
  height: 7vw;
  line-height: 7vw;
  /* border: 4px solid rgb(39, 97, 223); */
  text-align: center

}
.WarHistory-left_btm_left{
  position: relative;
  float: left;
  width: 80%;
  height: 7vw;
  line-height: 7vw;

  /* border: 4px solid rgb(39, 97, 223); */
}
.WarHistory-left_btm_left span{
  position: absolute;
  left: 15%;
  display: inline-block;
  /* line-height: 7vw; */
  /* border: 1px solid rgb(39, 97, 223); */

}
.WarHistory-left_btm_right{
  float: right;
  width: 15%;
  height: 7vw;
  line-height: 7vw;
  text-align: center
}
::v-deep .van-step__title{
  font-size: 2vw;
}
::v-deep .van-step__title h3,::v-deep .van-step__title p{
  margin: 1vw;
}
::v-deep #df-box .van-col{
  text-align: center;
}
.contrast{
  position: relative;
  margin-top: 2vw;
  height: 8vw;
  line-height: 8vw;
  text-align: center;
  /* border: 1px rgb(255, 255, 255) solid; */
}
.contrast .van-progress{
  margin-top: 3.5vw;
}
.contrast——tips{
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  color: gray;
  height: 2vw;
  font-size: 2vw;
  margin: 0;
  padding: 0;
  /* background-color: antiquewhite; */
  text-align: center;
  line-height: 2vw;
}
.Section_comparison{
  height: 8vw;
  line-height: 8vw;
  font-size: 2vw;
}
.Section_comparison .van-col{
  text-align: center;
}
#Section_1{
  color:gray
}
</style>
